<template>
  <div class="video">
    <!-- 标签区域 -->
    <div class="tags flex">
      <button class="btn" @click="popoverSwitch">
        <div v-if="!isShowPopover">
          {{curTag}}
          <i class="el-icon-arrow-right"></i>
        </div>
        <div v-else>关闭<i class="el-icon-arrow-down"></i></div>
      </button>
      <!-- 弹出层 -->
      <div class="popover" v-show="isShowPopover">
        <div class="pointer mgt-10" :class="{ isActive: -1 === curId }" @click="showChosenVideo(-1, 0, '全部')">全部</div>
        <ul class="flex">
          <li v-for="(tag,index) in tags" :key="index" class="font-14" @click="showChosenVideo(tag.id, 0, tag.name)">
              <span class="mgl-6" :class="{ isActive: tag.id === curId }">{{ tag.name }}</span>
          </li>
        </ul>
      </div>
      <!-- 右侧热门分类 -->
      <div class="hot-cate-wrap flex">
        <span v-for="tag in types" :key="tag.id" class="hot-item font-12 pointer mgr-15" :class="{ isActive: tag.id === curId }" @click="showChosenVideo(tag.id, 0, tag.name)">{{ tag.name }}</span>
      </div>
    </div>

    <video-list :videoList="videos" :load="loadVideo" :isDisabled="false" @toVideo="toVideo"></video-list>
  </div>
</template>

<script>
import VideoList from '@/components/video/videoList.vue'
import { getAllVideos, getVideoTags, getVideoTypes, getVideosOfAType } from '../../api/video.js'
import { throttle } from '../../utils/jieliu.js'

export default {
  data () {
    return {
      videos: [],
      // 之后改成路由跳转
      menus: [{ name: '视频', path: '/video' }, { name: 'MV', path: '/mv' }],
      offset: 0,
      timer: null,
      // 是否显示弹出层
      isShowPopover: false,
      tags: [],
      types: [],
      curId: -1,
      // 弹出层按钮名字
      curTag: ''
    }
  },
  created () {
    // 重置offset
    this.offset = 0
    this.showChosenVideo(-1, this.offset, '全部')
    this.showVideoTypes()
    this.showVideoTag()
  },
  components: {
    VideoList
  },
  methods: {
    async showVideoTypes () {
      const res = await getVideoTypes()
      if (res.data.code !== 200) return this.$message.error('获取标签失败')
      this.types = res.data.data
    },
    async showVideoTag () {
      const res = await getVideoTags()
      if (res.data.code !== 200) return this.$message.error('获取标签失败')
      this.tags = res.data.data
    },
    // 获取选择的视频
    async showChosenVideo (id, offset, name) {
      this.curTag = name
      let res = []
      let res2 = []
      this.offset = offset
      this.curId = id
      if (id === -1) {
        res = await getAllVideos(this.offset)
        res2 = await getAllVideos(this.offset + 8)
      } else {
        res = await getVideosOfAType(id, this.offset)
        res2 = await getVideosOfAType(id, this.offset + 8)
      }
      if (res.data.code !== 200) return this.$message.error('获取视频失败')
      if (this.offset === 0) {
        // 第一次获取就初始化
        this.offset += 16
        this.videos = res.data.datas
        this.videos.push(...res2.data.datas)
      } else {
        // 不是第一次获取就不断加载
        this.offset += 16
        this.videos.push(...res.data.datas)
        this.videos.push(...res2.data.datas)
      }
      this.isShowPopover = false
    },
    // 下拉加载视频,设置节流1s
    loadVideo: throttle(function () {
      this.offset += 16
      this.showChosenVideo(this.curId, this.offset, this.curTag)
    }, 1000),
    // 弹出框开关
    popoverSwitch () {
      this.isShowPopover = !this.isShowPopover
    },
    toVideo (id) {
      this.$router.push(`/videoDetail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
// 跟包住他的父级容器高度一致
.video {
  width: 100%;
}
.tags {
  width: 96%;
  justify-content: space-between;
  position: relative;
}
.popover {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 35px;
  z-index: 9;
  background-color: #fff;
  box-shadow: 0 0 8px rgb(226, 226, 223);
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    box-shadow: inset 0 0 3px #e0e0e0;
    background-color: #e0e0e0;
  }

}
ul {
  flex-wrap: wrap;
  li {
    width: 16%;
    text-align: left;
    cursor: pointer;
    margin: 10px;
    &:hover {
      color: #ec4141;
    }
  }
}

.hot-item {
  line-height: 30px;
  height: 30px;
}
.isActive {
  background-color: #fdf5f5;
  color: #ec4141;
  box-shadow:  0 0 15px #ac7d7d;
}
</style>
